﻿{extend name="public:base" /}


{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="table-responsive">

                        <table class="table table-striped">
                            <tr>
                                <th>视频号名称</th>
                                <th>账号标识（sessionId）</th>
                                <th>私信自动回复</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" class="form-control name" placeholder="请输入视频号名称">
                                </td>
                                <td>
                                    <input type="text" class="form-control sessionId" placeholder="请输入账号标识">
                                </td>
                                <td>
                                    <div class="layui-form">
                                        <input type="checkbox" name="is_auto_chat" lay-skin="switch" disabled>
                                    </div>
                                </td>
                                <td>
                                    <a href="javascript: void(0)" class="btn btn-white btn-sm save"><i class="iconfont icon-edit"></i> 保存
                                    </a>
                                </td>
                            </tr>
                            {volist name="list" id="vo" key="index"}
                            <tr>
                                <td>
                                    <input type="text" class="form-control edit-name" value="{$vo.name}" placeholder="请输入视频号名称">
                                </td>
                                <td>
                                    <input type="text" class="form-control edit-sessionId" value="{$vo.sessionId}" placeholder="请输入账号标识">
                                </td>
                                <td>
                                    <div class="layui-form">
                                        <input type="checkbox" name="is_auto_chat" lay-filter="is_auto_chat" lay-skin="switch" value="{$vo.id}" {$vo.is_auto_chat== 1 ? 'checked' : ''}>
                                    </div>
                                </td>

                                <td>
                                    <a href="javascript: void(0)" data-id="{$vo.id}" data-index="{$index-1}" class="btn btn-white btn-sm edit-save"><i class="iconfont icon-edit"></i> 保存
                                    </a>
                                    <a href="{:url(delAccount, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-del"><i class="iconfont icon-trash"></i> 删除
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>{/block}

{block name="js"}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    $(document).ready(function () {
        var timer;
        // 按钮点击事件
        $('#fetchCookiesButton').on('click', function () {
            window.open('https://channels.weixin.qq.com', '_blank');

            timer = setInterval(() => {
                var id = $('#change-account-select').val();
                // 向 content.js 发送消息，带上 id 参数
                window.postMessage({action: "fetchCookies", id: id}, "*");
            }, 1000)

        });

        // 接收来自 content.js 的 cookies 数据
        $(window).on('message', function (event) {
            const data = event.originalEvent.data;
            if (data && data.code === 1 && data.cookies) {
                var id = data.id;
                var cookie = data.cookies;

                $.post('/index/Api/setAccountCookie', {id, cookie}, res => {
                    if (res.result == 1) {
                        clearInterval(timer);
                        layer.msg(res.msg, {icon: 1, time: 1000}, () =>{
                            window.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1000}, () =>{
                            window.location.reload();
                        });
                    }
                }, 'JSON')

            }
        });
    });

    $('.save').click(function () {
        var name = $('.name').val();
        var sessionId = $('.sessionId').val();
        var cookie = $('.cookie').val();
        if (name == '' || sessionId == '' || cookie == '') {
            layer.msg('请填写完整信息', {icon: 2, time: 1000, shade: [0.3, '#000']});
            return false;
        }

        layer.load(1, {shade: [0.5, '#000']})

        new Promise(resolve => {
            $.post('/admin/manage/saveAccount', {
                name, sessionId, cookie
            }, res => {
                layer.closeAll();
                if (res.result == 1) {
                    resolve(res.data);
                } else {
                    lay.msg('保存失败', {icon: 2});
                }
            }, 'json')
        }).then(data => {
            var {id, apiLoginCookie} = data;
            if (apiLoginCookie === '') {
                $.post('/index/Api/getLoginCookie', {id}, res => {
                    layer.msg('保存成功', {icon: 1, time: 1000}, () => {
                        window.location.reload();
                    });
                }, 'json')
            }
        })

    })
    $('.edit-save').click(function () {
        var id = $(this).data('id');
        var index = $(this).data('index');
        var name = $('.edit-name').eq(index).val();
        var sessionId = $('.edit-sessionId').eq(index).val();
        if (name == '' || sessionId == '') {
            layer.msg('请填写完整信息', {icon: 2, time: 1000, shade: [0.3, '#000']});
            return false;
        }

        layer.load(1, {shade: [0.5, '#000']})

        new Promise(resolve => {
            $.post('/admin/manage/saveAccount', {
                id, name, sessionId
            }, res => {
                layer.closeAll();
                if (res.result == 1) {
                    resolve(res.data);
                } else {
                    layer.msg('保存失败', {icon: 2});
                }
            }, 'json')
        }).then(data => {
            var {id, apiLoginCookie} = data;
            if (apiLoginCookie === '') {
                $.post('/index/Api/getLoginCookie', {id}, res => {
                    layer.msg('保存成功', {icon: 1, time: 1000}, () => {
                        window.location.reload();
                    });
                })
            }
        })
    })

    //layUI select 处理
    layui.use('form', function () {
        var form = layui.form;

        form.on('switch(is_auto_chat)', function (data) {
            var id = data.value;

            layer.load(1);

            $.post('/admin/manage/ctrAutoChat', {id}, res => {
                layer.closeAll();
                if (res.result == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000});
                }
            }, 'json')
        })
    })
</script>{/block}